<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="author" content="挥手の骑士">
    
    
    
    
    
    
    <title>JavaScript 中的各种简写 | 骑士の物语</title>
    <link href="https://yihuishou.gitee.io" rel="prefetch">

    <link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/aos.js"></script>
    <script src="/js/highslide/highslide-full.min.js"></script>
    <link rel="stylesheet" href="/js/highslide/highslide.css">
    <style type="text/css">
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                background: url('/imgs/xsbg.gif');
                background-attachment: fixed;
            }
        }
    </style>
    
    <!--<script type="text/javascript">
      if (document.images) {
        var avatar = new Image();
        avatar.src = '/imgs/avatar.jpg'
        var previews = 'picHD_1.png,picHD_2.png,picHD_3.png,picHD_4.png,picHD_5.png,picHD_6.png,picHD_7.png,picHD_8.png,picHD_9.png,picHD_10.png,picHD_11.png,picHD_12.png,picHD_13.png,picHD_14.png,picHD_15.png,picHD_16.png,picHD_17.png,picHD_18.png,picHD_19.png,picHD_20.png,picHD_21.png,picHD_22.png,picHD_23.png,picHD_24.png,picHD_25.png,picHD_26.png,picHD_27.png,picHD_28.png,picHD_29.png,picHD_30.png,picHD_31.png,picHD_32.png,picHD_33.png,picHD_34.png,picHD_35.png,picHD_36.png,picHD_37.png,picHD_38.png,picHD_39.png,picHD_40.png,picHD_41.png,picHD_42.png'.split(',')
        var previewsPreLoad = []
        for(var i = 0; i < length; i++) {
          previewsPreLoad.push(new Image())
          previewsPreLoad[previewsPreLoad.length - 1].src = '/imgs/preview' + previews[i]
        }
      }
    </script>-->
</head></html>
<body>
    <!-- 背景轮播图功能 -->
    <section class="hidden-xs">
    <ul class="cb-slideshow">
        <li><span>天若</span></li>
        <li><span>有情</span></li>
        <li><span>天亦老</span></li>
        <li><span>我为</span></li>
        <li><span>长者</span></li>
        <li><span>续一秒</span></li>
    </ul>
</section>
    <!-- 欧尼酱功能, 谁用谁知道 -->
    
    <header class="navbar navbar-inverse" id="gal-header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".bs-navbar-collapse"
                    aria-expanded="false">
                <span class="fa fa-lg fa-reorder"></span>
            </button>
            <a href="https://yihuishou.gitee.io">
                
                <style>
                    #gal-header .navbar-brand {
                        height: 54px;
                        line-height: 24px;
                        font-size: 28px;
                        opacity: 1;
                        background-color: rgba(0,0,0,0);
                        text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
                    }
                </style>
                <!-- 这里使用文字(navbar_text or config.title) -->
                <div class="navbar-brand">骑士の物语</div>
                
            </a>
        </div>
        <div class="collapse navbar-collapse bs-navbar-collapse">
            <ul class="nav navbar-nav" id="menu-gal">
                
                
                <li class="">
                    <a href="/">
                        <i class="fa fa-home"></i>首页
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/archives">
                        <i class="fa fa-archive"></i>归档
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</header>
    <div id="gal-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 gal-right" id="mainstay">
                    
<article class="article well article-body" id="article">
    <div class="breadcrumb">
        <i class="fa fa-home"></i>
        <a href="https://yihuishou.gitee.io">骑士の物语</a>
        >
        <span>JavaScript 中的各种简写</span>
    </div>
    <!-- 大型设备详细文章 -->
    <div class="hidden-xs">
        <div class="title-article">
            <h1>
                <a href="/2018/11/20/4151092854/">JavaScript 中的各种简写</a>
            </h1>
        </div>
        <div class="tag-article">
            
            <span class="label label-gal">
                <i class="fa fa-tags"></i>
                
                <a href="/tags/JavaScript/">JavaScript</a>
                
            </span>
            
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> 2018-11-20
            </span>
            
        </div>
    </div>
    <!-- 小型设备详细文章 -->
    <div class="visible-xs">
        <center>
            <div class="title-article">
                <h4>
                    <a href="/2018/11/20/4151092854/">JavaScript 中的各种简写</a>
                </h4>
            </div>
            <p>
                <i class="fa fa-calendar"></i> 2018-11-20
            </p>
            <p>
                
                <i class="fa fa-tags"></i>
                
                <a href="/tags/JavaScript/">JavaScript</a>
                
                
                
            </p>
        </center>
    </div>
    <div class="content-article">
        <p>1.三元操作符<br>当想写if…else语句时，使用三元操作符来代替。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const x = 20;</span><br><span class="line">let answer;</span><br><span class="line">if (x &gt; 10) &#123;</span><br><span class="line">    answer = &apos;is greater&apos;;</span><br><span class="line">&#125; else &#123;</span><br><span class="line">    answer = &apos;is lesser&apos;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const answer = x &gt; 10 ? &apos;is greater&apos; : &apos;is lesser&apos;;</span><br></pre></td></tr></table></figure>

<p>也可以嵌套if语句：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const big = x &gt; 10 ? &quot; greater 10&quot; : x</span><br></pre></td></tr></table></figure>

<p>2.短路求值简写方式<br>当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if (variable1 !== null || variable1 !== undefined || variable1 !== &apos;&apos;) &#123;</span><br><span class="line">     let variable2 = variable1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者可以使用短路求值方法：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const variable2 = variable1 || &apos;new&apos;;</span><br></pre></td></tr></table></figure>

<p>3.声明变量简写方法</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let x;</span><br><span class="line">let y;</span><br><span class="line">let z = 3;</span><br></pre></td></tr></table></figure>

<p>简写方法：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let x, y, z=3;</span><br></pre></td></tr></table></figure>

<p>4.if存在条件简写方法</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if (likeJavaScript === true)</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if (likeJavaScript)</span><br></pre></td></tr></table></figure>

<p>只有likeJavaScript是真值时，二者语句才相等</p>
<p>如果判断值不是真值，则可以这样：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let a;</span><br><span class="line">if ( a !== true ) &#123;</span><br><span class="line">// do something...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let a;</span><br><span class="line">if ( !a ) &#123;</span><br><span class="line">// do something...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>5.JavaScript循环简写方法</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">for (let i = 0; i &lt; allImgs.length; i++)</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">for (let index in allImgs)</span><br></pre></td></tr></table></figure>

<p>也可以使用Array.forEach：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function logArrayElements(element, index, array) &#123;</span><br><span class="line">  console.log(&quot;a[&quot; + index + &quot;] = &quot; + element);</span><br><span class="line">&#125;</span><br><span class="line">[2, 5, 9].forEach(logArrayElements);</span><br><span class="line">// logs:</span><br><span class="line">// a[0] = 2</span><br><span class="line">// a[1] = 5</span><br><span class="line">// a[2] = 9</span><br></pre></td></tr></table></figure>

<p>6.短路评价<br>给一个变量分配的值是通过判断其值是否为null或undefined，则可以：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let dbHost;</span><br><span class="line">if (process.env.DB_HOST) &#123;</span><br><span class="line">  dbHost = process.env.DB_HOST;</span><br><span class="line">&#125; else &#123;</span><br><span class="line">  dbHost = &apos;localhost&apos;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const dbHost = process.env.DB_HOST || &apos;localhost&apos;;</span><br></pre></td></tr></table></figure>

<p>7.十进制指数<br>当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">for (let i = 0; i &lt; 10000; i++) &#123;&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">for (let i = 0; i &lt; 1e7; i++) &#123;&#125;</span><br><span class="line"></span><br><span class="line">// 下面都是返回true</span><br><span class="line">1e0 === 1;</span><br><span class="line">1e1 === 10;</span><br><span class="line">1e2 === 100;</span><br><span class="line">1e3 === 1000;</span><br><span class="line">1e4 === 10000;</span><br><span class="line">1e5 === 100000;</span><br></pre></td></tr></table></figure>

<p>8.对象属性简写<br>如果属性名与key名相同，则可以采用ES6的方法：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const obj = &#123; x:x, y:y &#125;;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const obj = &#123; x, y &#125;;</span><br></pre></td></tr></table></figure>

<p>9.箭头函数简写<br>传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function sayHello(name) &#123;</span><br><span class="line">  console.log(&apos;Hello&apos;, name);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">setTimeout(function() &#123;</span><br><span class="line">  console.log(&apos;Loaded&apos;)</span><br><span class="line">&#125;, 2000);</span><br><span class="line"></span><br><span class="line">list.forEach(function(item) &#123;</span><br><span class="line">  console.log(item);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">sayHello = name =&gt; console.log(&apos;Hello&apos;, name);</span><br><span class="line"></span><br><span class="line">setTimeout(() =&gt; console.log(&apos;Loaded&apos;), 2000);</span><br><span class="line"></span><br><span class="line">list.forEach(item =&gt; console.log(item));</span><br></pre></td></tr></table></figure>

<p>10.隐式返回值简写<br>经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字）</p>
<p>为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function calcCircumference(diameter) &#123;</span><br><span class="line">  return Math.PI * diameter</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var func = function func() &#123;</span><br><span class="line">  return &#123; foo: 1 &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">calcCircumference = diameter =&gt; (</span><br><span class="line">  Math.PI * diameter;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">var func = () =&gt; (&#123; foo: 1 &#125;);</span><br></pre></td></tr></table></figure>

<p>11.默认参数值<br>为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function volume(l, w, h) &#123;</span><br><span class="line">  if (w === undefined)</span><br><span class="line">    w = 3;</span><br><span class="line">  if (h === undefined)</span><br><span class="line">    h = 4;</span><br><span class="line">  return l * w * h;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">volume = (l, w = 3, h = 4 ) =&gt; (l * w * h);</span><br><span class="line"></span><br><span class="line">volume(2) //output: 24</span><br></pre></td></tr></table></figure>

<p>12.模板字符串<br>传统的JavaScript语言，输出模板通常是这样写的。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const welcome = &apos;You have logged in as &apos; + first + &apos; &apos; + last + &apos;.&apos;</span><br><span class="line"></span><br><span class="line">const db = &apos;http://&apos; + host + &apos;:&apos; + port + &apos;/&apos; + database;</span><br></pre></td></tr></table></figure>

<p>ES6可以使用反引号和${}简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const welcome = `You have logged in as $&#123;first&#125; $&#123;last&#125;`;</span><br><span class="line"></span><br><span class="line">const db = `http://$&#123;host&#125;:$&#123;port&#125;/$&#123;database&#125;`;</span><br></pre></td></tr></table></figure>

<p>13.解构赋值简写方法<br>在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const observable = require(&apos;mobx/observable&apos;);</span><br><span class="line">const action = require(&apos;mobx/action&apos;);</span><br><span class="line">const runInAction = require(&apos;mobx/runInAction&apos;);</span><br><span class="line"></span><br><span class="line">const store = this.props.store;</span><br><span class="line">const form = this.props.form;</span><br><span class="line">const loading = this.props.loading;</span><br><span class="line">const errors = this.props.errors;</span><br><span class="line">const entity = this.props.entity;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import &#123; observable, action, runInAction &#125; from &apos;mobx&apos;;</span><br><span class="line"></span><br><span class="line">const &#123; store, form, loading, errors, entity &#125; = this.props;</span><br></pre></td></tr></table></figure>

<p>也可以分配变量名：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const &#123; store, form, loading, errors, entity:contact &#125; = this.props;</span><br></pre></td></tr></table></figure>

<p>//最后一个变量名为contact<br>14.多行字符串简写<br>需要输出多行字符串，需要使用+来拼接：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const lorem = &apos;Lorem ipsum dolor sit amet, consectetur\n\t&apos;</span><br><span class="line">    + &apos;adipisicing elit, sed do eiusmod tempor incididunt\n\t&apos;</span><br><span class="line">    + &apos;ut labore et dolore magna aliqua. Ut enim ad minim\n\t&apos;</span><br><span class="line">    + &apos;veniam, quis nostrud exercitation ullamco laboris\n\t&apos;</span><br><span class="line">    + &apos;nisi ut aliquip ex ea commodo consequat. Duis aute\n\t&apos;</span><br><span class="line">    + &apos;irure dolor in reprehenderit in voluptate velit esse.\n\t&apos;</span><br></pre></td></tr></table></figure>

<p>使用反引号，则可以达到简写作用：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const lorem = `Lorem ipsum dolor sit amet, consectetur</span><br><span class="line">    adipisicing elit, sed do eiusmod tempor incididunt</span><br><span class="line">    ut labore et dolore magna aliqua. Ut enim ad minim</span><br><span class="line">    veniam, quis nostrud exercitation ullamco laboris</span><br><span class="line">    nisi ut aliquip ex ea commodo consequat. Duis aute</span><br><span class="line">    irure dolor in reprehenderit in voluptate velit esse.`</span><br></pre></td></tr></table></figure>

<p>15.扩展运算符简写<br>扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// joining arrays</span><br><span class="line">const odd = [1, 3, 5];</span><br><span class="line">const nums = [2 ,4 , 6].concat(odd);</span><br><span class="line"></span><br><span class="line">// cloning arrays</span><br><span class="line">const arr = [1, 2, 3, 4];</span><br><span class="line">const arr2 = arr.slice();</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// joining arrays</span><br><span class="line">const odd = [1, 3, 5 ];</span><br><span class="line">const nums = [2 ,4 , 6, ...odd];</span><br><span class="line">console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]</span><br><span class="line"></span><br><span class="line">// cloning arrays</span><br><span class="line">const arr = [1, 2, 3, 4];</span><br><span class="line">const arr2 = [...arr];</span><br></pre></td></tr></table></figure>

<p>不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const odd = [1, 3, 5 ];</span><br><span class="line">const nums = [2, ...odd, 4 , 6];</span><br></pre></td></tr></table></figure>

<p>也可以使用扩展运算符解构：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const &#123; a, b, ...z &#125; = &#123; a: 1, b: 2, c: 3, d: 4 &#125;;</span><br><span class="line">console.log(a) // 1</span><br><span class="line">console.log(b) // 2</span><br><span class="line">console.log(z) // &#123; c: 3, d: 4 &#125;</span><br></pre></td></tr></table></figure>

<p>16.强制参数简写<br>JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function foo(bar) &#123;</span><br><span class="line">  if(bar === undefined) &#123;</span><br><span class="line">    throw new Error(&apos;Missing parameter!&apos;);</span><br><span class="line">  &#125;</span><br><span class="line">  return bar;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">mandatory = () =&gt; &#123;</span><br><span class="line">  throw new Error(&apos;Missing parameter!&apos;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo = (bar = mandatory()) =&gt; &#123;</span><br><span class="line">  return bar;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>17.Array.find简写<br>想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const pets = [</span><br><span class="line">  &#123; type: &apos;Dog&apos;, name: &apos;Max&apos;&#125;,</span><br><span class="line">  &#123; type: &apos;Cat&apos;, name: &apos;Karl&apos;&#125;,</span><br><span class="line">  &#123; type: &apos;Dog&apos;, name: &apos;Tommy&apos;&#125;,</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">function findDog(name) &#123;</span><br><span class="line">  for(let i = 0; i&lt;pets.length; ++i) &#123;</span><br><span class="line">    if(pets[i].type === &apos;Dog&apos; &amp;&amp; pets[i].name === name) &#123;</span><br><span class="line">      return pets[i];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">pet = pets.find(pet =&gt; pet.type ===&apos;Dog&apos; &amp;&amp; pet.name === &apos;Tommy&apos;);</span><br><span class="line">console.log(pet); // &#123; type: &apos;Dog&apos;, name: &apos;Tommy&apos; &#125;</span><br></pre></td></tr></table></figure>

<h4 id="Object-key-简写"><a href="#Object-key-简写" class="headerlink" title="Object[key]简写"></a>Object[key]简写</h4><p>考虑一个验证函数</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function validate(values) &#123;</span><br><span class="line">  if(!values.first)</span><br><span class="line">    return false;</span><br><span class="line">  if(!values.last)</span><br><span class="line">    return false;</span><br><span class="line">  return true;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(validate(&#123;first:&apos;Bruce&apos;,last:&apos;Wayne&apos;&#125;)); // true</span><br></pre></td></tr></table></figure>

<p>假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 对象验证规则</span><br><span class="line">const schema = &#123;</span><br><span class="line">  first: &#123;</span><br><span class="line">    required:true</span><br><span class="line">  &#125;,</span><br><span class="line">  last: &#123;</span><br><span class="line">    required:true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 通用验证函数</span><br><span class="line">const validate = (schema, values) =&gt; &#123;</span><br><span class="line">  for(field in schema) &#123;</span><br><span class="line">    if(schema[field].required) &#123;</span><br><span class="line">      if(!values[field]) &#123;</span><br><span class="line">        return false;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return true;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">console.log(validate(schema, &#123;first:&apos;Bruce&apos;&#125;)); // false</span><br><span class="line">console.log(validate(schema, &#123;first:&apos;Bruce&apos;,last:&apos;Wayne&apos;&#125;)); // true</span><br></pre></td></tr></table></figure>

<p>现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了</p>
<p>19.双重非位运算简写<br>有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Math.floor(4.9) === 4 //true</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">~~4.9 === 4 //true</span><br></pre></td></tr></table></figure>


    </div>
</article>


                </div>
                <aside class="col-md-4 gal-left" id="sidebar">
    <!-- 此为sidebar的搜索框, 非搜索结果页面 -->
<aside id="sidebar-search">
    <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <form class="form-inline clearfix" id="search-form" method="get"
              action="/search/index.html">
            <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~" autocomplete="off">
            <button class="btn btn-danger btn-gal" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </div>
</aside>
    <aside id="sidebar-author">
    <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
        <div class="panel-heading" style="text-align: center">
            <i class="fa fa-quote-left"></i>
            挥手の骑士
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="author-panel text-center">
            <img src="/imgs/avatar.jpg" width="140" height="140"
                 alt="个人头像" class="author-image">
            <p class="author-description"></p>
        </div>
    </div>
</aside>
    
    <!-- 要配置好leancloud才能开启此小工具 -->
    
    
    <aside id="sidebar-recent_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            近期文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/08/18/55226946/">agent v3.2.1 插件激活码</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/22/2412014068/">干掉 CMS 未来属于 ZGC</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/21/4075219928/">OpenJDK 和 OracleJDK 的抉择</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/20/368594680/">Flutter 音乐播放器开发之路（一）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/15/3650854255/">XaaS 到底是什么？</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/15/4036766117/">让 Windows 10 开机自动登录</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/14/466733536/">给 Flutter 项目初始化构建提个速</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/12/4125727764/">JavaScript 中 Splice 函数与数组塌陷</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/12/1586694155/">在 Java 中缩写 Lambda 表达式</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/04/2276828982/">博客文章规范</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="sidebar-rand_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            随机文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/03/05/928293067/">IDEA 导出 Jar 包执行报错</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/09/01/3864825553/">Java-Jwt 工具详解</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/12/4125727764/">JavaScript 中 Splice 函数与数组塌陷</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/09/07/1615584056/">Java 配置类与 XML</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/04/27/2001433166/">PS 快速将多张图片导入到同一图片中</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/03/25/1700353500/">SpringDataJPA 效率优化</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/05/15/1954507039/">WinRar 常用自解压路径及命令</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/23/3728873280/">扫描登陆流程详解</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/05/24/1593155822/">永远不一致的分布式系统</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/12/22/3001741591/">用文件特征码来检测文件类型</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">

                
                <li>
                    <a href="/2018/11/20/4151092854/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                
                
                <li>
                    <a href="/2018/11/20/4151092854/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a>
                </li>
                
                
                <li>
                    <a href="/2018/11/20/4151092854/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
                
            </ul>
            <div class="tab-content">
                
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
    
    <a href="/tags/SpringSecurity/" style="font-size: 16.26470874266335px;" class="tag-cloud-link">SpringSecurity</a>
    
    <a href="/tags/Xml/" style="font-size: 16.827098856522696px;" class="tag-cloud-link">Xml</a>
    
    <a href="/tags/随笔/" style="font-size: 19.788673352731323px;" class="tag-cloud-link">随笔</a>
    
    <a href="/tags/大前端/" style="font-size: 19.037923345127783px;" class="tag-cloud-link">大前端</a>
    
    <a href="/tags/Dart/" style="font-size: 16.51467701958817px;" class="tag-cloud-link">Dart</a>
    
    <a href="/tags/Flutter/" style="font-size: 8.082262093852698px;" class="tag-cloud-link">Flutter</a>
    
    <a href="/tags/Go/" style="font-size: 14.6986893108909px;" class="tag-cloud-link">Go</a>
    
    <a href="/tags/IDEA/" style="font-size: 8.347317503606725px;" class="tag-cloud-link">IDEA</a>
    
    <a href="/tags/Java/" style="font-size: 18.160168148444683px;" class="tag-cloud-link">Java</a>
    
    <a href="/tags/JavaScript/" style="font-size: 11.188445007491001px;" class="tag-cloud-link">JavaScript</a>
    
    <a href="/tags/Mysql/" style="font-size: 8.014132897551761px;" class="tag-cloud-link">Mysql</a>
    
    <a href="/tags/Oracle/" style="font-size: 10.603179624790368px;" class="tag-cloud-link">Oracle</a>
    
    <a href="/tags/Photoshop/" style="font-size: 12.13701548902818px;" class="tag-cloud-link">Photoshop</a>
    
    <a href="/tags/RPG-Maker-MV/" style="font-size: 10.36603360077738px;" class="tag-cloud-link">RPG Maker MV</a>
    
    <a href="/tags/Restful/" style="font-size: 16.033846505123186px;" class="tag-cloud-link">Restful</a>
    
    <a href="/tags/Redis/" style="font-size: 13.050186082635474px;" class="tag-cloud-link">Redis</a>
    
    <a href="/tags/SQL/" style="font-size: 9.792299130299497px;" class="tag-cloud-link">SQL</a>
    
    <a href="/tags/SpringBoot/" style="font-size: 16.98021737900629px;" class="tag-cloud-link">SpringBoot</a>
    
    <a href="/tags/Swagger/" style="font-size: 19.83425864865189px;" class="tag-cloud-link">Swagger</a>
    
    <a href="/tags/Windows/" style="font-size: 16.291041301675506px;" class="tag-cloud-link">Windows</a>
    
    <a href="/tags/Deepleanring/" style="font-size: 8.266760758023779px;" class="tag-cloud-link">Deepleanring</a>
    
    <a href="/tags/Vue/" style="font-size: 13.421964326775223px;" class="tag-cloud-link">Vue</a>
    
    <a href="/tags/Docker/" style="font-size: 9.292709485805814px;" class="tag-cloud-link">Docker</a>
    
    <a href="/tags/Hexo/" style="font-size: 16.191589036782382px;" class="tag-cloud-link">Hexo</a>
    
    <a href="/tags/VsCode/" style="font-size: 10.393791472117712px;" class="tag-cloud-link">VsCode</a>
    
    <a href="/tags/SpringCloud/" style="font-size: 16.762289266484643px;" class="tag-cloud-link">SpringCloud</a>
    
</div>
                
                
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
    
    <li>
        <a href="http://noodlefighter.com" target="_blank">虾包</a>
    </li>
    
    <li>
        <a href="https://loli.la" target="_blank">超级叫了</a>
    </li>
    
    <li>
        <a href="https://konata9.github.io" target="_blank">吃土的小此方</a>
    </li>
    
</div>
                
                
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
    
    <li>
        <a href="https://github.com/yihuishou" target="_blank">Github</a>
    </li>
    
    <li>
        <a href="https://gite.com/yihuishou" target="_blank">码云</a>
    </li>
    
    <li>
        <a href="https://www.zhihu.com/people/hei-yi-tian-shi-48" target="_blank">知乎</a>
    </li>
    
</div>
                
            </div>
        </div>
    </aside>
    
</aside>
            </div>
        </div>
    </div>
    <footer id="gal-footer">
    <div class="container">
        Copyright © 2018 挥手の骑士 Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
    </div>
</footer>

<!-- 回到顶端 -->
<div id="gal-gotop">
    <i class="fa fa-angle-up"></i>
</div>
</body>
<script src="/js/activate-power-mode.js"></script>
<script>

    // 配置highslide
	hs.graphicsDir = '/js/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
      interval: 5000,
      repeat: true,
      useControls: true,
      fixedControls: "fit",
      overlayOptions: {
        opacity: 0.75,
        position: "bottom center",
        hideOnMouseOut: true
      }
    })

    // 初始化aos
    AOS.init({
      duration: 1000,
      delay: 0,
      easing: 'ease-out-back'
    });

</script>
<script>
	POWERMODE.colorful = 'true';    // make power mode colorful
	POWERMODE.shake = 'true';       // turn off shake
	// TODO 这里根据具体情况修改
	document.body.addEventListener('input', POWERMODE);
</script>
<script>
    window.slideConfig = {
      prefix: '/imgs/slide/background',
      ext: 'jpg',
      maxCount: '6'
    }
</script>
<script src="/js/hs.js"></script>
<script src="/js/blog.js"></script>



</html>